<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>意向岗位管理</title>
		<meta name="description" content="这是一个 index 页面">
		<meta name="keywords" content="index">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta name="renderer" content="webkit">
		<meta http-equiv="Cache-Control" content="no-siteapp" />
		<link rel="icon" type="image/png" href="${ctx}/assets/i/favicon.png">
		<link rel="apple-touch-icon-precomposed" href="${ctx}/assets/i/app-icon72x72@2x.png">
		<meta name="apple-mobile-web-app-title" content="Amaze UI" />
		<link rel="stylesheet"
			href="${ctx}/assets/css/amazeui.datatables.min.css" />
		<!-- 
		<link rel="stylesheet" href="${ctx}/assets/css/amazeui.min.css" />
		<script src="${ctx}/assets/js/echarts.min.js"></script>
		<script src="${ctx}/assets/js/jquery.min.js"></script>
		-->
		<script src="${ctx}/assets/js/echarts.min.js"></script>
		<link rel="stylesheet" href="http://cdn.amazeui.org/amazeui/2.7.2/css/amazeui.min.css" />
		<script src="https://cdn.bootcss.com/jquery/2.2.3/jquery.js"></script>
		<link rel="stylesheet" href="${ctx}/assets/css/app.css">
	</head>

	<body data-type="widgets">
		<script src="${ctx}/assets/js/theme.js"></script>
		<div class="am-g tpl-g">
			<!-- 内容区域 -->
			<div class="row-content">

				<div class="row-content am-cf">
					<div class="row">
						<div class="am-u-sm-6 am-u-md-6 am-u-lg-6">
							<div class="widget am-cf">
								<div class="widget-head am-cf">
									<div class="widget-title am-fl">意向岗位管理</div>
									<div class="widget-function am-fr">
										<a href="javascript:;" class="am-icon-cog"></a>
									</div>
								</div>
								<div class="widget-body am-fr">
									<form class="am-form tpl-form-border-form tpl-form-border-br" method="post" action="add">
										<div class="am-form-group">
											<label for="cellphone" class="am-u-sm-3 am-form-label">手机号码 <span
											class="tpl-form-line-small-title">cellphone</span>
											</label>
											<div class="am-u-sm-9">
												<input type="text" required class="tpl-form-input" name="cellphone" id="cellphone" placeholder="请11位手机号码 ">
											</div>
										</div>
										<div class="am-form-group">
											<label for="first" class="am-u-sm-3 am-form-label">首选岗位 </label>
											<div class="am-u-sm-9">
												<select data-am-selected="{maxHeight: 200,btnWidth: '100%', btnSize: 'lg', btnStyle: 'danger'}" required name="first" id="first">
												</select>
											</div>
										</div>
										<div class="am-form-group">
											<label for="second" class="am-u-sm-3 am-form-label">次选岗位 </label>
											<div class="am-u-sm-9">
												<select data-am-selected="{maxHeight: 200,btnWidth: '100%', btnSize: 'lg', btnStyle: 'danger',dropUp: 1}" required name="second" id="second">
												</select>
											</div>
										</div>
										<div class="am-form-group">
											<label for="third" class="am-u-sm-3 am-form-label">备选岗位 </label>
											<div class="am-u-sm-9">
												<select data-am-selected="{maxHeight: 200,btnWidth: '100%', btnSize: 'lg', btnStyle: 'secondary',dropUp: 1}" name="third" id="third">
												</select>
											</div>
										</div>
										<div class="am-form-group">
											<div class="am-u-sm-9 am-u-sm-push-3">
												<button id="btn" type="submit" class="am-btn am-btn-primary tpl-btn-bg-color-success ">提交</button>
											</div>
										</div>
									</form>
								</div>
							</div>
						</div>
						<div class="am-fr am-u-sm-6 am-u-md-6 am-u-lg-6">
							<div id="main" style="height:420px;"></div>
						</div>
					</div>
					<div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
						<div class="am-u-sm-12" style="height:500px;">
							<table id="example"
								class="am-table am-table-compact am-table-striped tpl-table-black">
								<thead>
									<tr>
										<th>id</th>
										<th>flag</th>
										<th>岗位名称</th>
										<th>岗位描述</th>
									</tr>
								</thead>
								<tfoot>
									<tr>
										<th>id</th>
										<th>flag</th>
										<th>岗位名称</th>
										<th>岗位描述</th>
									</tr>
								</tfoot>
							</table>
						</div>
					</div>
				</div>
			</div>
		</div>
		
		<!-- 
		<script src="${ctx}/assets/js/amazeui.min.js"></script>
		 -->
		<script src="http://cdn.amazeui.org/amazeui/2.7.2/js/amazeui.min.js"></script>
		<script
			src="${ctx}/assets/js/amazeui.datatables.min.js"></script>
		<script type="text/javascript">
		$(document).ready(function() {
			$('#example').dataTable({
				"processing" : true,
				"serverSide" : true,
				"searching": false,
				"bLengthChange": false,
				"scrollY": "500px",
                "scrollCollapse": "true",
                 "paging": "false",
				"ajax" : {
					"type" : "POST",
					"url" : "${ctx}/wechat/job/getData",
					"data" : {},
				},
				 "columns": [ //表格要显示的列定义(字段名称做了处理)
	                    { "data": "id", "visible":false },
	                    { "data": "flag", "visible":false },
	                    { "data": "name","width":'20%' },
	                    { "data": "desc" },
	                    //其余字段定义省略
	            ],
			});
		})
	</script>
		<script type="text/javascript">
			function getJobs() {
				$.ajax({
					url : "getjobs",
					type : "post",
					async : false,
					success : function(data) {
						$("#first").empty();
						$("#second").empty();
						$("#third").empty();
						$("#first").append('<option></option>');
						$("#second").append('<option></option>');
						$("#third").append('<option></option>');
						for ( var i in data) {
							$("#first").append("<option value='"+data[i].id+"'>"+data[i].name+"</option>");
							$("#second").append("<option value='"+data[i].id+"'>"+data[i].name+"</option>");
							$("#third").append("<option value='"+data[i].id+"'>"+data[i].name+"</option>");
						}
					}
				});
			}
			getJobs();
		</script>

	<script type="text/javascript">
		function clazzEcharts(){
			var myChart = echarts.init(document.getElementById('main'));
			 myChart.setOption( {
		            title: {
		            		x:'center',
		                	text: '岗位统计'
		            },
	            tooltip: {},
	            calculable: true,
	            xAxis: {
	                data: []
	            },
	            yAxis: {
	                type: 'value',
	                show: false
	            },
	            series: 
	            	[{
	                name: '岗位意向',
	                type: 'bar',
	                itemStyle: {
	                    normal: {
	                        color: function(params) {
	                            // build a color map as your need.
	                            var colorList = [
	                              '#B5C334','#FCCE10','#E87C25','#27727B',
	                               '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
	                               '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0','#C1232B'
	                            ];
	                            return colorList[params.dataIndex]
	                        },
	                        label: {
	                            show: true,
	                            position: 'top',
	                            formatter: '{b}\n{c}'
	                        }
	                    }
	                },
	                data: []
	            }]
	        });
	        $.ajax({
				url : "getecharts",
				type : "post",
				async : false,
				success : function(data) {
					// 填入数据
				    var title = data.title + '岗位统计';
				    myChart.setOption({
				    	title: {
		                text: title
		           		 },
				        xAxis: {
				            data: data.category
				        },
				        series: [{
				            // 根据名字对应到相应的系列
				            name: '销量',
				            data: data.data
				        }]
				    });
				}
			});
	        // 使用刚指定的配置项和数据显示图表。
		}
	        // 基于准备好的dom，初始化echarts实例
	     clazzEcharts();   
	    </script>
	</body>

</html>